<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-3.3.7/css/bootstrap.min.css" />
		<script src="/static/manage/common/bootstrap/js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<form class="form-inline">
			<div class="form-group">
				<label for="exampleInputName2">分类名称：</label>
				<input type="text" class="form-control" id="type_name" name="type_name" placeholder="请输入名称">
			</div>
			<button type="button" class="btn btn-primary" id="btns2"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查询</button>
			<button type="reset" class="btn btn-info"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>&nbsp;重置</button>
			<!-- Button trigger modal -->
			<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;新增</button>
		</form>

		<table id="table2">

		</table>

		<!-- 添加Modal -->
		<form id="fm">
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">添加列表</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label for="exampleInputName2">分类名称：</label>
								<input type="text" class="form-control" id="type_name" name="type_name" placeholder="请输入名称">
							</div>
							<div class="form-group">
								<label for="exampleInputName2">排序号：</label>
								<input type="number" class="form-control" id="sort_no" name="sort_no" placeholder="请输入内容">
							</div>
							<div class="form-group">
								<label for="exampleInputName2">备注：</label>
								<textarea class="form-control" rows="5" cols="50" id="type_remark" name="type_remark" placeholder="请输入内容"></textarea>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal" onclick="restClose()">关闭</button>
							<button type="button" class="btn btn-primary" id="addbtn2">保存</button>
						</div>
					</div>
				</div>
			</div>
		</form>

		<!-- 修改Modal -->
		<form id="fm2">
			<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">修改列表</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<input type="hidden" class="form-control" id="type_id1" name="type_id" value="">
								<label for="exampleInputName2">分类名称：</label>
								<input type="text" class="form-control" id="type_name1" name="type_name" value="">
							</div>
							<div class="form-group">
								<label for="exampleInputName2">排序号：</label>
								<input type="number" class="form-control" id="sort_no1" name="sort_no" value="">
							</div>
							<div class="form-group">
								<label for="exampleInputName2">备注：</label>
								<textarea class="form-control" rows="5" cols="50" id="type_remark1" name="type_remark" value=""></textarea>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" id="updatebtn2">保存</button>
						</div>
					</div>
				</div>
			</div>
		</form>
	</body>

	<script type="text/javascript">
		$(function() {

			//1.初始化Table

			var oTable = new TableInit();

			oTable.Init();
		});

		var TableInit = function() {
			var oTableInit = new Object();
			//初始化Table
			oTableInit.Init = function() {

				$('#table2').bootstrapTable({

					method: 'get',

					contentType: "application/x-www-form-urlencoded",

					url: "/bnt/type", //请求后台的URL（*）

					striped: true, //是否显示行间隔色

					locale: 'zh-CN', //中文支持

					pagination: true, //是否开启分页（*）

					pageNumber: 1, //初始化加载第一页，默认第一页

					pageSize: 5, //每页的记录行数（*）

					pageList: [3, 5, 7], //可供选择的每页的行数（*）

					cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

					sortable: false, //是否启用排序

					sortOrder: "asc", //排序方式

					sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

					showRefresh: true, //刷新按钮

					queryParams: oTableInit.queryParams, //传递参数（*）

					showColumns: true, //是否显示所有的列

					showRefresh: true, //是否显示刷新按钮

					clickToSelect: true, //是否启用点击选中行

					uniqueId: "type_id", //每一行的唯一标识，一般为主键列

					columns: [{
						field: 'type_name',
						title: '分类名称',
						align: 'center',
					}, {
						field: 'type_remark',
						title: '备注',
						align: 'center',
					}, {
						field: 'sort_no',
						title: '排序',
						align: 'center',
					}, {
						field: 'modify_time',
						title: '更新时间',
						align: 'center',
						//获取日期列的值进行转换
						formatter: function(value, row, index) {
							return changeDateFormat(value)
						}
					}, {
						field: 'cz',
						title: '操作',
						width: '200px',
						align: 'center',
						formatter: function(value, row, index) {
							return '<button class="btn btn-warning" data-toggle="modal" data-target="#myModal2" onclick="findByTypeId(' + row.type_id + ')">修改<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>' + '&nbsp&nbsp' + '<button onclick="deleteType(' + row.type_id + ')" class="btn btn-danger">删除<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>'
						}

					}]

				});

			};
			//得到查询的参数

			oTableInit.queryParams = function(params) {

				var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

					//偏移量
					offset: params.offset,

					//每页多少条数据
					pageSize: params.limit,

					type_name: $("#type_name").val()
				};
				return temp;
			};
			return oTableInit;
		};

		//转换日期格式(时间戳转换为datetime格式)
		function changeDateFormat(cellval) {
			var dateVal = cellval + "";
			if(cellval != null) {
				var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

				var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

				return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
			}
		}

		//查询
		$('#btns2').click(function() {
			$('#table2').bootstrapTable('refresh');
		})

		//添加
		$("#addbtn2").click(function() {
			$.ajax({
				type: "post",
				url: "/bnt/add",
				data: $("#fm").serialize(),
				success: function(data) {
					$("#myModal").modal("hide")
					location.reload()
					$("#table2").bootstrapTable('refresh');
				}
			});
		})

		//删除
		function deleteType(type_id) {
			$.ajax({
				type: "post",
				url: "/bnt/deleteType/" + type_id,
				success: function(data) {
					$("#table2").bootstrapTable('refresh');
				}
			});
		}

		//根据ID查询
		function findByTypeId(type_id) {
			$.ajax({
				type: "post",
				url: "/bnt/findByTypeId/" + type_id,
				success: function(data) {
					$("#type_id1").val(type_id);
					$("#type_name1").val(data.rows.type_name);
					$("#type_remark1").val(data.rows.type_remark);
					$("#sort_no1").val(data.rows.sort_no);
				}
			});
		}

		//修改
		$("#updatebtn2").click(function() {
			$.ajax({
				type: "post",
				url: "/bnt/updateType",
				data: {
					type_id: $("#type_id1").val(),
					type_name: $("#type_name1").val(),
					type_remark: $("#type_remark1").val(),
					sort_no: $("#sort_no1").val()
				},
				success: function(data) {
					$("#myModal2").modal("hide")
					$("#table2").bootstrapTable('refresh');
				}
			});

		})
		
		//关闭后清空信息
		function restClose(){
			document.getElementById("fm").reset();
		}
	</script>

</html>